<script setup lang="ts">
import { computed } from 'vue';
import { App } from 'ant-design-vue';
import { useBattle, useScene } from '../../../../composables';
import { EVENTS, GameKernel } from '../../../../game';
import { formatLargeNumber, rarityTextColorClass } from '../../../../utils';
import type { BattleEventLog } from '../../../../game/model/battle/type';
import VProgress from '../../components/progress.vue';
import LogList from './log-list.vue';

const emit = defineEmits<{
  (e: 'back'): void;
}>();

const { modal } = App.useApp();

const { state: sceneState } = useScene();
const { state: battleState } = useBattle();

const battleInfo = computed(() => {
  return battleState.value.battleInfo;
});

const isExploring = computed(() => {
  return sceneState.value.isExploring;
});

const isBattling = computed(() => {
  return battleState.value.isBattling;
});

function onBackClick() {
  emit('back');
}

function onExploreClick() {
  GameKernel.inst.bus.emit(EVENTS.SCENE_AUTO_EXPLORE_START);
}

function onStopExploreAndBattleClick() {
  modal.confirm({
    title: '提示',
    content: '确定要停止探索和战斗吗？',
    okText: '确定',
    cancelText: '取消',
    centered: true,
    onOk: () => {
      GameKernel.inst.bus.emit(EVENTS.BATTLE_STOP);
      GameKernel.inst.bus.emit(EVENTS.SCENE_STOP_EXPLORE);
    },
  });
}
</script>

<template>
  <div
    class="absolute left-0 top-0 bottom-0 right-0 bg-container-background flex flex-col"
  >
    <div class="flex-1 overflow-auto flex flex-col">
      <div
        v-if="isBattling || battleState.battleInfo.playerUnits.length"
        class="flex-1 overflow-auto flex flex-col"
      >
        <div class="flex-none text-center text-xs">
          战斗回合：{{ battleInfo.currentRound }}/{{ battleInfo.maxRounds }}
        </div>
        <div class="battle flex-1 overflow-auto flex gap-8 p-1">
          <!-- 友方 -->
          <div
            class="flex-1 overflow-auto w-[calc((100%-0.25rem)/2] h-full flex gap-1"
          >
            <div class="flex-1 w-[calc((100%-0.25rem)/2)] flex flex-col gap-1">
              <div
                v-for="player in battleInfo.playerUnits.slice(5)"
                :key="player.id"
                class="flex-none h-1/5"
              >
                <div class="h-full overflow-hidden">
                  <a-card class="h-full">
                    <div>{{ player.name }}</div>
                    <div class="text-[10px] wrap-normal text-nowrap">
                      {{
                        formatLargeNumber(Math.floor(player.currentHealth))
                      }}/{{ formatLargeNumber(Math.floor(player.maxHealth)) }}
                    </div>
                    <div>
                      <v-progress
                        :value="player.currentHealth"
                        :max="player.maxHealth"
                        :rounded="true"
                        color="red"
                        size="mini"
                      ></v-progress>
                    </div>
                  </a-card>
                </div>
              </div>
              <div
                v-for="i in 5 - battleInfo.playerUnits.slice(5).length"
                :key="i"
                class="flex-1"
              ></div>
            </div>
            <div
              class="flex-1 overflow-auto w-[calc((100%-0.25rem)/2)] flex flex-col gap-1"
            >
              <div
                v-for="player in battleInfo.playerUnits.slice(0, 5)"
                :key="player.id"
                class="flex-1"
              >
                <div class="h-full overflow-hidden">
                  <a-card class="h-full">
                    <div class="text-[12px]">{{ player.name }}</div>
                    <div class="text-[10px] wrap-normal text-nowrap">
                      {{
                        formatLargeNumber(Math.floor(player.currentHealth))
                      }}/{{ formatLargeNumber(Math.floor(player.maxHealth)) }}
                    </div>
                    <div>
                      <v-progress
                        :value="player.currentHealth"
                        :max="player.maxHealth"
                        :rounded="true"
                        color="red"
                        size="mini"
                      ></v-progress>
                    </div>
                  </a-card>
                </div>
              </div>
              <div
                v-for="i in 5 - battleInfo.playerUnits.slice(0, 5).length"
                :key="i"
                class="flex-1"
              ></div>
            </div>
          </div>
          <!-- 敌方 -->
          <div
            class="flex-1 overflow-auto w-[calc((100%-0.25rem)/2] h-full flex gap-1"
          >
            <div class="flex-1 w-[calc((100%-0.25rem)/2)] flex flex-col gap-1">
              <div
                v-for="enemy in battleInfo.enemyUnits.slice(0, 5)"
                :key="enemy.id"
                class="flex-1 overflow-auto"
              >
                <div class="h-full overflow-hidden">
                  <a-card class="h-full">
                    <div class="text-[12px]">{{ enemy.name }}</div>
                    <div class="text-[10px] wrap-normal text-nowrap">
                      {{
                        formatLargeNumber(Math.floor(enemy.currentHealth))
                      }}/{{ formatLargeNumber(Math.floor(enemy.maxHealth)) }}
                    </div>
                    <div>
                      <v-progress
                        :value="enemy.currentHealth"
                        :max="enemy.maxHealth"
                        :rounded="true"
                        color="red"
                        size="mini"
                      ></v-progress>
                    </div>
                  </a-card>
                </div>
              </div>
              <div
                v-for="i in 5 - battleInfo.enemyUnits.slice(0, 5).length"
                :key="i"
                class="flex-1 overflow-auto"
              ></div>
            </div>
            <div
              class="flex-1 overflow-auto w-[calc((100%-0.25rem)/2)] flex flex-col gap-1"
            >
              <div
                v-for="enemy in battleInfo.enemyUnits.slice(5)"
                :key="enemy.id"
                class="flex-1 overflow-auto"
              >
                <div class="h-full overflow-hidden">
                  <a-card class="h-full">
                    <div class="text-[12px]">{{ enemy.name }}</div>
                    <div class="text-[10px] wrap-normal text-nowrap">
                      {{
                        formatLargeNumber(Math.floor(enemy.currentHealth))
                      }}/{{ formatLargeNumber(Math.floor(enemy.maxHealth)) }}
                    </div>
                    <div>
                      <v-progress
                        :value="enemy.currentHealth"
                        :max="enemy.maxHealth"
                        :rounded="true"
                        color="red"
                        size="mini"
                      ></v-progress>
                    </div>
                  </a-card>
                </div>
              </div>
              <div
                v-for="i in 5 - battleInfo.enemyUnits.slice(5).length"
                :key="i"
                class="flex-1 overflow-auto"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div
        v-else-if="isExploring"
        class="flex-1 flex items-center justify-center"
      >
        探索中...
      </div>
      <div v-else class="flex-1 flex items-center justify-center">
        请点击 [探索] 开始寻找敌人
      </div>
      <div class="h-22 flex-none border-0 border-t border-solid border-border">
        <log-list :data="battleState.battleLog">
          <template #item="{ rowData }: { rowData: BattleEventLog }">
            <div
              v-if="!rowData.items || rowData.items.length === 0"
              class="h-full flex items-center px-2"
            >
              {{ rowData.message }}
            </div>
            <div v-else>
              <div></div>
              <div class="h-full flex px-2">
                <div class="flex-none">获得物品：</div>
                <div class="flex-1 flex flex-wrap gap-1">
                  <div
                    v-for="(item, index) in rowData.items"
                    :key="index"
                    class="flex flex-wrap"
                  >
                    <div :class="[rarityTextColorClass(item.rarity)]">
                      [{{ item.name }}]
                    </div>
                    <div v-if="item.quantity > 1">x{{ item.quantity }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </log-list>
      </div>
    </div>
    <div
      class="grid grid-cols-5 gap-2 p-2 flex-none border-0 border-t border-solid border-border"
    >
      <a-button :block="true" @click="onBackClick">地图</a-button>
      <a-button
        :block="true"
        :loading="isExploring"
        :disabled="isBattling"
        @click="onExploreClick"
      >
        <span v-if="!isExploring">探索</span>
      </a-button>
      <a-button
        :block="true"
        :disabled="!isBattling && !isExploring"
        @click="onStopExploreAndBattleClick"
      >
        <span>停止</span>
      </a-button>
    </div>
  </div>
</template>

<style scoped>
.scene .battle :deep(.ant-card-body) {
  padding: 4px;
  height: 100%;
}
</style>
